$tree-selector: $prefix + 'tree-selector';

.#{$tree-selector} {
    &-wrapper {
        @apply relative;
    }

    &-input {
        @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500
    }

    &-menu {
        @apply w-full p-1 absolute hidden border border-gray-300 dark:border-gray-700 z-10 bg-white rounded-lg shadow dark:bg-gray-700;

        &-open {
            @apply block;
        }

        &-inner {
            @apply ps-10 hidden;
        }

        &-inner-open {
            @apply flex flex-col;
        }
    }

    &-option {
        @apply flex flex-col gap-1;

        &-content {
            @apply flex-1 cursor-pointer rounded-md flex p-1 items-center gap-2 transition-all;
        }

        &-content:hover {
            @apply bg-gray-100 dark:bg-gray-700;
        }

        &-icon {
            @apply gap-2;
        }

        &-header {
            @apply flex items-center p-1;
        }

        &-toggler {
            @apply rounded-md text-xl cursor-pointer flex items-center justify-center w-8 h-8 transition-all;
        }

        &-toggler-icon::before {
            @apply text-lg;
            content: '+';
        }

        &-toggler-hidden {
            visibility: hidden;

        }

        &-toggler:hover {
            @apply bg-gray-100 dark:bg-gray-700;
        }
    }
}

.#{$tree-selector}-option:has(.#{$tree-selector}-option-active)>.#{$tree-selector}-option-header>.#{$tree-selector}-option-content {
    @apply bg-blue-50/50 dark:bg-gray-600/50;
}

.#{$tree-selector}-option-active>.#{$tree-selector}-option-header>.#{$tree-selector}-option-content {
    @apply bg-blue-100 dark:bg-gray-600;
}